{extend name="$_admin_public_base_"/}
{block name="style"}
<link href="__LIBS__/webuploader/css/webuploader.css" type="text/css" rel="stylesheet">
<link href="__LIBS__/daterangepicker/daterangepicker-bs3.css" type="text/css" rel="stylesheet">
<style type="text/css">
.meta-ext{background-color: #55CCFF;color:#fff;font-size: 12px;font-weight:500;padding:0px 8px 2px;float: right;border-radius: 2px;}
.attachment-foot .file-name{white-space:nowrap;width:63%;padding-left: 3px;}
.attachment_meta_id{position: absolute;left:15px;bottom: 33px;font-size: 12px;color: #fff;}
</style>
{/block}

{block name="main"}
<form class="form" id="search-form" method="get" action="{:url('admin/attachment/index')}">
    {include file="$search_template_path" /}
</form>
<section class="content pt-5">
<div class="box box-solid eacoo-box">
{notempty name="tab_nav"}
    <div class="box-body pb-0">
        <div class="eacoo-tabs">
            <div class="">
                <ul class="nav nav-tabs">
                    {volist name="tab_nav.tab_list" id="tab"}
                        <li class="{php}if($tab_nav['current'] == $key) echo 'active';{/php}"><a href="{$tab.href}" {$tab.extra_attr|default=''}>{$tab.title}</a></li>
                    {/volist}
                </ul>
            </div>
        </div>
    </div>
{/notempty}
<div class="box-body">
  <div class="attachment-wrap">
      
    <!--此页面主体内容-->
    <div class="row mt-10">
        
        <div class="col-xs-12 col-sm-12 button-list clearfix">   
             <div class="col-xs-4 col-sm-4 form-group pr-0 pl-0">
                {php}if(eacoo_url('admin/Upload/upload',['type'=>'picture'])!=''){{/php}
                 <span id="web_uploader_wrapper_attachmentIndex" class="btn btn-info btn-raised btn-sm">
                     <i class="fa fa-cloud-upload"></i> 上传图片
                 </span>
                 {php}}{/php}
                 {php}if(eacoo_url('admin/Upload/upload')!=''){{/php}
                 <span id="web_uploader_wrapper_attachmentFile" class="btn btn-info btn-raised btn-sm">
                     <i class="fa fa-cloud-upload"></i> 上传文件
                 </span>
                 {php}}{/php}
                 
            </div>
            <!--高级工具-->
              <div class="col-xs-4 col-sm-4 mb-15 ml-15 text-right pull-right" id="more-method">
                <label class="checkbox-toggle color-6 mr-10"><input class="check-all" type="checkbox"> 全选</label>
                 <a target-form="ids" class="btn btn-primary btn-sm" onclick="move()"><i class="fa fa-exchange"></i> 修改分类</a>&nbsp;<a title="批量删除" target-form="ids" class="btn btn-danger ajax-post confirm btn-sm" model="attachment" href="{:url('attachment/setStatus',['status'=>'delete','model'=>'attachment'])}">批量删除</a>&nbsp;
              </div>
        </div>

    </div>
    <hr/>
    <div class="row mt-20 ml0 mr0" id="attachment-content">
             
    </div>
  <!-- Modal Structure -->
    </div>
</div>
    <div class="modal fade mt100" id="moveModal">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                    <p class="modal-title">移动至</p>
                </div>
                <div class="modal-body">
                    <form action="{:url('moveCategory')}" method="post" class="form-move">
                        <div class="form-group">
                            <select name="to_cid" class="form-control">
                              {php}$input_media_cat = input('get.media_cat');{/php}
                              {volist name="media_cats" id="media_cat"}
                                <option value="{$media_cat.term_id}" {eq name="media_cat.term_id" value="$input_media_cat"}selected{/eq}>{$media_cat.name}</option>
                              {/volist}
                            </select>
                        </div>
                        <div class="form-group">
                            <input type="hidden" name="ids">
                            <input type="hidden" name="from_cid" value="{$cid|default='0'}">
                            <button class="btn btn-primary btn-block submit ajax-post" type="submit" target-form="form-move">确 定</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</section>

<script id="attachment_tpl" type="text/html">
    <ul class="attachment_list" >
  <% for (var i = 0; i < data.length; i ++) { %>
   <% var row = data[i]; %>
   <li class="col-sm-6 col-md-2 col-lg-2 mb-20" data-id="{{@row.id}}" >
    <div class="box-style">
      <div class="thumbnail">   
        <div class="centered tc">     
            <img src="{{@row.thumb_src}}" alt="" >
            <span class="attachment_meta_id fl">[{{@row.id}}]</span>
        </div>
      </div>
      <div class="attachment-foot">
         <span><input type="checkbox" class="ids" name="ids[]" value="{{@row.id}}"></span><span class="disline oh f13 color-5 file-name">{{@row.name}}</span><span class="meta-ext">{{@row.ext}}</span>
      </div>
    </div>
  </li>
  <% } %>
  <% if(data.length==0){ %>
    <div class="tc no-found">
      <p class="text-center">暂无结果</p>
    </div>
  <% } %>
  </ul> 
    <% if(page_content){ %>
    <div class="attachment-page-warp tc">
        <ul class="pagination">
            {{@page_content}}
        </ul>
    </div>
    <% } %>
</script>
{/block}

{block name="script"}
<script type="text/javascript" src="__LIBS__/artTemplate/template.js"></script>
<script type="text/javascript" src="__LIBS__/daterangepicker/moment.min.js"></script>
<script type="text/javascript" src="__LIBS__/daterangepicker/daterangepicker.js"></script>

<script type="text/javascript" src="__LIBS__/webuploader/js/webuploader.min.js"></script>
<script type="text/javascript">
    //Date range picker
    $('#reservation').daterangepicker();
    //Date range picker with time picker
    $('#reservationtime').daterangepicker({timePicker: true, timePickerIncrement: 30, format: 'MM/DD/YYYY h:mm A'});
    //Date range as a button
    $('#choice_date_range').daterangepicker(
        {
          ranges: {
            '今天': [moment(), moment()],
            '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            '最近7天': [moment().subtract(6, 'days'), moment()],
            '最近30天': [moment().subtract(29,'days'), moment()],
          },
          startDate: moment().subtract(29, 'days'),
          endDate: moment()
        },
        function (start, end) {
          $('#choice_date_range').val(start.format('YYYY/MM/DD') + '—' + end.format('YYYY/MM/DD'));
        }
    );
     /*弹窗*/
    $(function () {
        var upload_attachmentIndex  = WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: true,
            // swf文件路径
            swf: '__LIBS__/webuploader/Uploader.swf',
            // 文件接收服务端。
            server: "{:eacoo_url('admin/Upload/upload',['path_type'=>$path_type,'type'=>'picture'])}",
            fileNumLimit: 10,
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            compress: false,
            // 验证单个文件大小是否超出限制, 超出则不允许加入队列
            fileSingleSizeLimit:{php}echo intval(config('attachment_options.image_max_size'))?:2*1024*1024;{/php},
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: {'id': "#web_uploader_wrapper_attachmentIndex", 'multi': false},
            accept:{title:'Image',extensions:'{:config('attachment_options.image_exts')}',mimeTypes:'image/*'}
        });
        // 当有文件添加进来的时候
        upload_attachmentIndex.on( 'fileQueued', function( file ) {
            $("ul.attachment_list").prepend('<li class="col-sm-6 col-md-2 col-lg-2 mb-20" id="'+file.id+'"><div class="box-style oh" style="height:160px;"><div class="progress progress-striped active" style="display: block;margin-top:41%;"><div class="progress-bar" role="progressbar" style="width: 100%;"></div></div><div class="attachment-foot"><p class="state"></p></div></div></li>');
        })
        // 文件上传过程中创建进度条实时显示。
        upload_attachmentIndex.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                $percent = $li.find('.progress .progress-bar');

            // 避免重复创建
            if ( !$percent.length ) {
                $percent = $('<div class="progress progress-striped active">' +
                    '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                    '</div>' +
                    '</div>').appendTo( $li ).find('.progress-bar');
            }

            $li.find('p.state').text('上传中');

            $percent.css( 'width', percentage * 100 + '%' );
        });
        /*上传成功*/
        upload_attachmentIndex.on('uploadSuccess', function (file, result) {
            if(result.code==1){
                var data = result.data;
                if (data.already==1) {
                    $( '#'+file.id ).remove();
                    showAttachmentInfo(data.id);//存在同个文件直接显示附件信息
                    $('#attachmentInfoModal').modal('show');
                    updateAlert(result.msg,'success');
                } else{
                    updateAlert(result.msg,'success');
                    window.location.href="{:url('index',['path_type'=>$path_type])}";
                }

            } else {
                updateAlert(result.msg);
            }
        });
        upload_attachmentIndex.on( 'uploadError', function( file ) {
            console.debug(file);
        });

        //上传文件
        var upload_attachmentFile  = WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: true,
            // swf文件路径
            swf: '__LIBS__/webuploader/Uploader.swf',
            // 文件接收服务端。
            server: "{:eacoo_url('admin/Upload/upload',['path_type'=>'file','type'=>'file'])}",
            fileNumLimit: 10,
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            compress: false,
            // 验证单个文件大小是否超出限制, 超出则不允许加入队列
            fileSingleSizeLimit:{php}echo intval(config('attachment_options.file_max_size'))?:2*1024*1024;{/php},
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: {'id': "#web_uploader_wrapper_attachmentFile", 'multi': false},
            accept:{title:'file',extensions:'{:config('attachment_options.file_exts')}',mimeTypes:'file/*'}

        });
        // 当有文件添加进来的时候
        upload_attachmentFile.on( 'fileQueued', function( file ) {
            $("ul.attachment_list").prepend('<li class="col-sm-6 col-md-2 col-lg-2 mb-20" id="'+file.id+'"><div class="box-style oh" style="height:160px;"><div class="progress progress-striped active" style="display: block;margin-top:41%;"><div class="progress-bar" role="progressbar" style="width: 100%;"></div></div><div class="attachment-foot"><p class="state"></p></div></div></li>');
        })
        // 文件上传过程中创建进度条实时显示。
        upload_attachmentFile.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                $percent = $li.find('.progress .progress-bar');

            // 避免重复创建
            if ( !$percent.length ) {
                $percent = $('<div class="progress progress-striped active">' +
                    '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                    '</div>' +
                    '</div>').appendTo( $li ).find('.progress-bar');
            }

            $li.find('p.state').text('上传中');

            $percent.css( 'width', percentage * 100 + '%' );
        });
        /*上传成功*/
        upload_attachmentFile.on('uploadSuccess', function (file, result) {
            if(result.code==1){
                var data = result.data;
                if (data.already==1) {
                    $( '#'+file.id ).remove();
                    showAttachmentInfo(data.id);//存在同个文件直接显示附件信息
                    $('#attachmentInfoModal').modal('show');
                    updateAlert(result.msg,'success');
                } else{
                    updateAlert(result.msg,'success');
                    window.location.href="{:url('index',['path_type'=>$path_type])}";
                }

            } else {
                updateAlert(result.msg);
            }
        });
        upload_attachmentFile.on( 'uploadError', function( file ) {
            console.debug(file);
        });

        //模态框内容
        $('body').on('click', '.attachment_list li', function(e){
            var $this = $(this);
            var attachmentId = $this.attr('data-id');
            showAttachmentInfo(attachmentId);//显示附件信息
          })

        //筛选
        $('body').on('click', '#search', function(e){
            //e.preventDefault();
            var seperator = "&";
            var form =$("#search-form");
            var form_data = form.serializeObject();
            var action    = form.attr('action');
            if(action == ''){
                action = location.href;
            }
            var sep_prefix = '?';
            if (EacooPHP.url_model==2) {
                sep_prefix = '&';
            }
            loadAttachment(form_data)
            return false;
        });

        /**
         * 分页
         * @param  {[type]} ) {    } [description]
         * @return {[type]} [description]
         * @date   2018-09-27
         */
        $(document).on('click','.attachment-page-warp ul li a', function(event) {
            event.preventDefault();
            var $this = $(this);
            //切换Tab
            $(".attachment-page-warp ul li").removeClass('active');
            $this.parent().addClass('active');
            var paged = $this.data('paged');
            loadAttachment({paged:paged});
        })

    });   
    
    /**
     * 更新模态框附件信息
     * @param  {[type]} attachmentId [description]
     * @date   2018-02-16
     * @author 心云间、凝听 <981248356@qq.com>
     */
    function showAttachmentInfo(attachmentId){
        parent.layer.open({
            type: 2,
            title: '附件信息',
            shadeClose: true,
            shade: 0.8,
            area: ['620px','460px'],
            content: url('admin/Attachment/info',['id='+attachmentId]), 
            btn: ['提交','关闭'],
            yes: function(index, layero){
                var p_layer = parent.layer;
                var alt = p_layer.getChildFrame('#alt', index).val();
                  var term_id = p_layer.getChildFrame('#file-termid', index).val();
                  $.post(url("admin/Attachment/edit"),{id:attachmentId,alt:alt,term_id:term_id},function(result){
                      if (result.code==1) {
                        parent.updateAlert(result.msg,'success');
                        p_layer.closeAll();
                      } else{
                        parent.updateAlert(result.msg,'success');
                        
                      }
                  });
            }
        });
    }
      
    //移动分类
    function move(){
          var ids = '';
          $('input[name="ids[]"]:checked').each(function(){
             ids += ',' + $(this).val();
          });
          if(ids != ''){
              ids = ids.substr(1);
              $('input[name="ids"]').val(ids);
              $('.modal-title').html('移动选中的的附件至：');
              $('#moveModal').modal('show', 'fit')
          }else{
              updateAlert('请选择需要移动的附件', 'warning');
          }
      }

/**
 * 加载附件列表
 * @param  {[type]} action_url 请求地址
 * @return {[type]} [description]
 * @date   2018-03-09
 * @author 心云间、凝听 <981248356@qq.com>
 */
function loadAttachment(params) {
    var defaults = {
        action_url: url('admin/attachment/index'),
        paged: 1,
    };
    params = $.extend(defaults, params);
    var action_url = params.action_url;
    $.get(action_url, params, function (result) {
        var attachment_list = template('attachment_tpl', result);
        $('#attachment-content').html(attachment_list);
    })
}

loadAttachment();

$.fn.serializeObject = function() {
    var o = {};
    var a = this.serializeArray();      
    $.each(a, function() {          
        if (o[this.name]) {             
            if (!o[this.name].push) {                   
                o[this.name] = [ o[this.name] ];                
            }               
            o[this.name].push(this.value || '');            
        } else {                
            o[this.name] = this.value || '';            
        }       
    });     
    return o;   
}
</script>

{/block}